<template>
  <view class="page">
	  <!-- 姓名 -->
	  <view class="section">
	    <text class="label">姓名</text>
	    <input
	      v-model="name"
	      type="text"
	      maxlength="23"
	      placeholder="请输入真实姓名"
	      class="input"
	    />
	  </view>
    <!-- 卡号 -->
    <view class="section">
      <text class="label">卡号</text>
      <input
        v-model="cardNo"
        type="number"
        maxlength="23"
        placeholder="请输入银行卡号"
        class="input"
        @input="onCardInput"
      />
    </view>
    <!-- 开户行 -->
    <view class="section">
      <text class="label">开户行</text>
      <picker mode="selector" :range="banks" @change="pickBank">
        <view class="picker-box">
          <text>{{ bankName || '请选择开户行' }}</text>
          <image src="/static/xia.png" class="icon-xia" />
        </view>
      </picker>
    </view>

    <!-- 提交 -->
    <button class="submit" @click="submit">立即绑定</button>

    <!-- 安全提示 -->
    <view class="safe-tips">
      <text>• 信息仅用于平台的转账</text>
      <text>• 请确保银行卡为本人名下</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import {fetchBankMessage}from '../../api/bank.js'

/* ===== 数据 ===== */
const name = ref('')   
const cardNo = ref('')          // 原始卡号（无空格）
const bankName = ref('')        // 开户行
const banks = ref(['工商银行', '农业银行', '中国银行', '建设银行', '交通银行', '邮储银行', '招商银行', '中信银行', '光大银行', '浦发银行'])

/* ===== 计算 ===== */
const cardNoShow = computed(() => formatCardNo(cardNo.value))
const cardType = computed(() => (cardNo.value.length >= 16 ? '储蓄卡' : '请选择卡号'))

/* ===== 方法 ===== */
function onCardInput(e) {
  cardNo.value = e.detail.value.replace(/\s/g, '') // 去掉空格
  autoDetectBank(cardNo.value)
}
function formatCardNo(str) {
  return str.replace(/(.{4})/g, '$1 ').trim()
}
function autoDetectBank(str) {
  // 简单前 6 位匹配（可扩展完整 BIN 表）
  const bin6 = str.slice(0, 6)
  const map = {
    '622202': '工商银行',
    '622848': '农业银行',
    '621661': '中国银行',
    '622700': '建设银行',
    '622260': '交通银行',
    '621098': '邮储银行',
    '622588': '招商银行',
  }
  bankName.value = map[bin6] || ''
}
function pickBank(e) {
  bankName.value = banks.value[e.detail.value]
}

 async function submit() {
  if (!cardNo.value || cardNo.value.length < 16) {
    uni.showToast({ title: '请输入正确卡号', icon: 'none' })
    return
  }
  if (!bankName.value||!name.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  postBM()

  }

const postBM = async()=>{
	await fetchBankMessage({
		realName:name.value,
		bankNumber:Number(cardNo.value),
		bankName:bankName.value
	})
}
onMounted(async() => {
		
		// allOrders.value = orderfenxiao
		// await postBM()
	})
</script>

<style lang="scss" scoped>
.page {
  padding: 32rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}



/* 输入区域 */
.section {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  position:relative;
  
  .label { font-size: 28rpx; color: #333; margin-bottom: 12rpx; }
  .input {
    width: 100%;
    font-size: 32rpx;
    padding: 16rpx 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .picker-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 1px solid #e0e0e0;
    .icon-xia { width: 24rpx; height: 14rpx; }
  }
}

/* 提交按钮 */
.submit {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}

/* 安全提示 */
.safe-tips {
  margin-top: 24rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
}
</style>